<template>
  <div>
    <header>确认注册</header>
    <button-tab v-model="tabvalue">
      <button-tab-item selected>确认注册</button-tab-item>
      <button-tab-item @on-item-click="goto">查询所有</button-tab-item>
    </button-tab>
    <div style="padding: 15px 0 0;">
      <checker v-model="val"
               default-item-class="demo-item"
               selected-item-class="demo-item-selected"
               style="width: 80%; margin: 0 auto;">
        <checker-item v-for="(item, index) in options"
                      :key="index"
                      :value="item.value">{{item.name}}</checker-item>
      </checker>
    </div>
    <x-input style="background: #fff;
                    border-radius: 5px;
                    height: 36px;
                    padding: 0px 10px;
                    border: 1px solid #9a9696;
                    margin:14px 20px 0px"
             v-model="keyword"
             @on-enter="result"
             :show-clear="false">
      <img type="search"
           slot="label"
           src="../../static/img/search.png">
      <icon slot="right"
            :type="isShowIcon_key"
            @click.native="watchkey"></icon>
    </x-input>
    <span style="color:red;font-size:10px;margin:10px 10px 10px 20px">
      如有疑问，请到服务台咨询或联系 郝庆会:18838060418
    </span>
    <x-table full-bordered
             style="background:#fff">
      <thead>
        <tr style="background:#eee">
          <th>姓名</th>
          <th>手机号</th>
          <th>宿舍号</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in person"
            :key="index"
            @click="resultClick(index)">
          <td>{{item.name}}</td>
          <td>{{item.phone}}</td>
          <td>{{item.dorm}}</td>
        </tr>
      </tbody>
    </x-table>
    <div v-transfer-dom>
      <confirm v-model="show"
               title="确认信息"
               @on-confirm="firm">
        <x-input v-for="(item,index) in items"
                 disabled
                 label-width="90px"
                 :key="index"
                 :title="item.name"
                 :value="item.value"></x-input>
        <x-textarea title="家庭住址"
                    :value="address">
        </x-textarea>
        <p style="color:red; font-size:14px">审核信息无误后，点击确定，即注册成功</p>
      </confirm>
    </div>
    <p class="copyright">技术支持&copy;三月软件小组</p>
    <toast v-model="showmsg"
           type="warn">{{msg}}</toast>
    <toast v-model="showsuc"
           type="success">{{msg1}}</toast>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
      card_id: "",
      val: "1",
      value: "",
      showmsg: false,
      msg: "",
      msg1: "",
      showsuc: false,
      tabvalue: 0,
      isShowIcon_key: "",
      address: "",
      options: [
        {
          name: "姓名",
          value: "1"
        },
        {
          name: "手机号",
          value: "2"
        },
        {
          name: "宿舍号",
          value: "3"
        }
      ],
      items: [
        {
          name: "姓名",
          value: ""
        },
        {
          name: "性别",
          value: ""
        },
        {
          name: "班级",
          value: ""
        },
        {
          name: "手机号",
          value: ""
        },
        {
          name: "家长手机号1",
          value: ""
        },
        {
          name: "家长手机号2",
          value: ""
        },
        {
          name: "政治面貌",
          value: ""
        },
        {
          name: "QQ号",
          value: ""
        },
        {
          name: "微信号",
          value: ""
        }
      ],
      person: [],
      show: false,
      sletperson: []
    };
  },
  mounted() {
    let begin = "";
    this.person = this.getperson(begin);
    this.$vux.loading.show({
      text: "Loading"
    });
    setTimeout(() => {
      this.$vux.loading.hide();
    }, 1000);
  },
  watch: {
    keyword(newValue) {
      this.isShowIcon_key = newValue == "" ? "" : "clear";
    }
  },
  methods: {
    onItemClick(value, disabled) {
      console.log(value, disabled);
      if (!this.disabled) {
        this.showPopup = false;
      }
    },
    watchkey() {
      this.keyword = "";
    },
    result() {
      this.person = this.getperson(this.keyword);
    },
    goto() {
      this.$router.push("/instructor/regtInfo");
    },
    resultClick(index) {
      this.show = true;
      this.items[0].value = this.sletperson[index].name;
      this.items[1].value = this.sletperson[index].sex;
      this.items[2].value = this.sletperson[index].classes;
      this.items[3].value = this.sletperson[index].phone_num;
      this.items[4].value = this.sletperson[index].family_num;
      this.items[5].value = this.sletperson[index].family_numtwo;
      this.items[6].value = this.sletperson[index].polApp;
      this.items[7].value = this.sletperson[index].qq_id;
      this.items[8].value = this.sletperson[index].wechat_id;
      this.address = this.sletperson[index].address;
      this.card_id = this.sletperson[index].card_id;
    },
    //点击确认后，访问接口注册完成
    firm() {
      let params = new URLSearchParams();
      params.append("card_id", this.card_id);
      this.axios({
        method: "post",
        url: "/student/sucRegist",
        params
      }).then(resp => {
        if (resp.data.code == 0) {
          this.showsuc = true;
          this.msg1 = resp.data.msg;
          this.person = this.getperson("");
          this.keyword = "";
          this.getperson("");
        } else if (resp.data.code == 1) {
          this.showmsg = true;
          this.msg = resp.data.msg;
        } else if (resp.data.code == 2) {
          this.showmsg = true;
          this.msg = resp.data.msg;
        }
      });
    },
    getperson(val) {
      //请求不同的接口获取姓名,手机号和宿舍号
      let rs = [];
      let num = this.val;
      let k = val;
      k = k.replace(/#/g, "-");
      let params = new URLSearchParams();
      params.append("type", num);
      params.append("key", k);
      this.axios({
        method: "post",
        url: "/student/conRegist",
        params
      }).then(resp => {
        if (resp.data.code == 0) {
          if (resp.data.result == null) {
            this.showmsg = true;
            this.msg = resp.data.msg;
          } else {
            this.sletperson = resp.data.result;
            for (let i = 0; i < resp.data.result.length; i++) {
              rs.push({
                name: resp.data.result[i].name,
                phone: resp.data.result[i].phone_num,
                dorm: resp.data.result[i].dorHouse
              });
            }
          }
        } else if (resp.data.code == 1) {
          this.showmsg = true;
          this.msg = resp.data.msg;
        } else if (resp.data.code == 2 && val != "") {
          this.showmsg = true;
          this.msg = resp.data.msg;
          setTimeout(() => {
            this.$router.push("/admin/login");
          }, 1000);
        }
      });
      return rs;
    }
  }
};
</script>

<style scoped>
header {
  height: 60px;
  line-height: 60px;
  font-size: 21px;
  text-align: center;
  letter-spacing: 1px;
  color: #fff;
  background-color: rgba(11, 83, 155, 1);
}

#select {
  font-size: 16px;
  padding: 8px;
  margin: 18px 0px 0px 20px;
  border-radius: 5px;
}
.copyright {
  font-size: 11px;
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.weui-search-bar {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  padding: 0px;
}

.vux-button-group {
  width: 80%;
  margin: auto;
  margin-top: 15px;
}

.vux-button-group > a.vux-button-group-current {
  background-color: #37aefc;
}

.demo-item {
  padding: 5px 15px;
  margin: 0px 10px;
  border-radius: 15px;
  border: 1px solid #37aefc;
}
.demo-item-selected {
  background-color: #37aefc;
  color: #fff;
}
</style>




